<script setup>
import { inject, onMounted, reactive, ref } from "vue";
import { getCode, login, register } from "../../services/login";
import { useRouter } from "vue-router";
import { elNotificationStore } from "../../store/LoginSuccessStore";
import { isLoginStore } from "../../store/IsLoginStore";
import { storeToRefs } from "pinia";
import { ElMessage } from "element-plus";
const isLogin = isLoginStore();
const elNotStore = elNotificationStore();
let { isLoginFlag, isLoginBox } = storeToRefs(isLogin);
let { isShow } = storeToRefs(elNotStore);
const router = useRouter();
//关闭
const handleClose = function () {
  isLoginBox.value = false;
};
//登录
const loginInfo = ref({
  userName: "",
  password: "",
  code: "",
  codeKey: "",
  type: 1,
});
const onSubmit = (values) => {
  login(loginInfo.value)
    .then((res) => {
      let userData = {
        username: res.data.username, //账号
        fullName: res.data.fullName, // 姓名
        headPic: res.data.headPic, // 头像
        endTime: res.data.endTime, //最新登录时间
        roleName: res.data.roleName, //角色
        id: res.data.id,
      };
      localStorage.setItem("userData", JSON.stringify(userData));
      isShow.value = 1;
      isLoginFlag.value = true;
      isLoginBox.value = false;
      router.go(0);
    })
    .catch((error) => {
      codeInfo();
    });
};
//验证码
const captcha = ref({
  uuid: "",
  img: "",
});
const codeInfo = function () {
  getCode()
    .then((res) => {
      captcha.value = res.data;
      loginInfo.value.codeKey = captcha.value.uuid;
    })
    .catch((error) => {});
};
//标签页
const activeName = ref("login");
//注册
const registerInfo = ref({
  username: "",
  password: "",
  verifyPassword: "",
  registerType: 0,
});
const onRegister = () => {
  register(registerInfo.value)
    .then((res) => {
      showNotify({ type: "success", message: "注册成功" });
      activeName.value = "login";
      registerInfo.value = {
        username: "",
        password: "",
        verifyPassword: "",
        registerType: 0,
      };
    })
    .catch((error) => {});
};
onMounted(() => {
  codeInfo();
});
</script>
<template>
  <van-popup
    v-model:show="isLoginBox"
    position="bottom"
    @click-overlay="handleClose"
    @click-close-icon="handleClose"
    :style="{ width: '100%' }"
  >
    <van-tabs v-model:active="activeName">
      <van-tab title="登录" name="login">
        <van-form @submit="onSubmit">
          <van-cell-group inset>
            <van-field
              v-model="loginInfo.userName"
              name="用户名"
              label="用户名"
              placeholder="用户名"
              :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
              v-model="loginInfo.password"
              type="password"
              name="密码"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
            <van-field name="验证码" label="验证码">
              <template #input>
                <van-field
                  v-model="loginInfo.code"
                  placeholder="验证码"
                  class="code"
                  :rules="[{ required: true, message: '请填验证码' }]"
                />
                <van-image :src="captcha.img" @click="codeInfo" />
              </template>
            </van-field>
          </van-cell-group>
          <div style="margin: 16px">
            <van-button round block type="primary" native-type="submit">
              登录
            </van-button>
          </div>
        </van-form>
      </van-tab>
      <van-tab title="注册" name="register">
        <van-form @submit="onRegister">
          <van-cell-group inset>
            <van-field
              v-model="registerInfo.username"
              name="用户名"
              label="用户名"
              placeholder="用户名"
              :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
              v-model="registerInfo.password"
              type="password"
              name="密码"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
            <van-field
              v-model="registerInfo.verifyPassword"
              type="password"
              name="确认密码"
              label="确认密码"
              placeholder="确认密码"
              :rules="[{ required: true, message: '请填写确认密码' }]"
            />
          </van-cell-group>
          <div style="margin: 16px">
            <van-button round block type="primary" native-type="submit">
              注册
            </van-button>
          </div>
        </van-form>
      </van-tab>
    </van-tabs>
  </van-popup>
</template>

<style lang="less" scoped>
.code {
  padding: 0px;
  width: 80%;
}
</style>
